<script setup lang="ts">
import TabBar from "@/components/TabBar/index.vue";
import ViewPage from "@/sources-subpackage/components/TabBarView/index.vue?async";
import { useGlobalStore } from "@/stores/modules/global";
import { useRegisterWotHooks } from "@/utils";

useRegisterWotHooks(); // 在主包内注册挂载 Wot 组件库的工具函数，避免在分包内 hooks 不生效

const globalStore = useGlobalStore();

const tabBarList = computed(() => globalStore.initialState.tabBarList);

const customizeTabBarEnable = computed(() => globalStore.initialState.customizeTabBarEnable);

onLoad((e: AnyObject | undefined) => {
  // 原生 tabBar 需要写在 pages.json 里无法动态生成，动态生成 tabBar 使用页面跳转方法跳转时会出现闪烁，所以使用动态组件方式生成
  // 如果使用的是自定义tabBar，想要使用 reLaunch 或 redirect 返回到 tabBar 对应的某个页面，则需要使用 utils 下的 useReLaunchTabBar  或 useRedirectTabBar 方法跳转
  if (!e || !Object.keys(e!).length) return;
  if (e.tabBarSelectedValue) globalStore.setGlobalState({ key: "currentSelectedValue", value: Number.parseInt(e.tabBarSelectedValue) });
});
</script>

<template>
  <ViewPage />
  <TabBar v-model="globalStore.initialState.currentSelectedValue" :customize-tab-bar-enable="customizeTabBarEnable" :tab-bar-list="tabBarList" />
</template>

<route lang="jsonc" type="home">
{
  "layout": "default",
  "style": {
    "navigationBarTitleText": "汇麦商城",
    "navigationStyle": "custom"
  }
}
</route>
